<template>
    <div>
        <!-- <div class="wrap">
            <h2>state</h2>
            <p>name:{{ userStore.name }}</p>
            <p>age:{{ userStore.age }}</p>
            <p>grade:{{ userStore.grade }}</p>
        </div>
        <div class="wrap">
            <h2>getters</h2>
            <p>isGrowUp:{{ userStore.isGrowUp }}</p>
        </div>
        <div class="wrap">
            <h2>actions</h2>
            <p>
                <button @click="userStore.addAge">age++</button>
                <button @click="userStore.reduceAge">age--</button>
                <button @click="userStore.addChinese">chinese</button>
            </p>
            <p>
                <button @click="userStore.age++">age++</button>
                <button @click="userStore.age--">age--</button>
                <button @click="userStore.grade.chinese++">chinese</button>
            </p>
        </div> -->

        <div class="wrap">
            <h2>state</h2>
            <p>name:{{ name }}</p>
            <p>age:{{ age }}</p>
            <p>grade:{{ grade }}</p>
        </div>
        <div class="wrap">
            <h2>getters</h2>
            <p>isGrowUp:{{ isGrowUp }}</p>
        </div>
        <div class="wrap">
            <h2>actions</h2>
            <p>
                <button @click="addAge">age++</button>
                <button @click="reduceAge">age--</button>
                <button @click="addChinese">chinese</button>
            </p>
            <p>
                <button @click="age++">age++</button>
                <button @click="age--">age--</button>
                <button @click="grade.chinese++">chinese</button>
            </p>
        </div>
    </div>
</template>

<script setup>
/*  
    <script setup>在脚手架中做了什么操作
    1. 每个 *.vue 文件最多可以包含一个 <script setup>。(不包括一般的 <script>)
    2. 这个脚本块将被(脚手架)预处理为组件的 setup() 函数，这意味着它将为每一个组件实例都执
    3. <script setup> 中的顶层绑定(脚本中定义的变量和方法)都将自动暴露给模板。
    4. <script setup> 引入的局部组件,会默认对应变量名成注册
*/

import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia'

const userStore = useUserStore();
console.log(userStore);

// 不能直接对store实例进行解构, 丧失响应性
// let {name,age} = userStore;
// console.log(name,age);

// console.log(toRefs(userStore));
// console.log(toRefs(userStore).addAge.value);

// console.log(storeToRefs(userStore));  // 只会将store中的state和getters相关属性做响应式处理

// storeToRefs(userStore)  保持响应性
const { name, age, grade, isGrowUp } = storeToRefs(userStore);
console.log(name);
console.log(age);

const { addAge, reduceAge, addChinese } = userStore;


</script>

<style  scoped>
.wrap {
    padding: 10px;
    margin: 10px 0;
    border: 1px dashed #333;
}
</style>